<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <f:view contentType="text/html"> <!-- Agregar esta linea y cerrarla despues de body -->
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link href="resources/css/default.css" rel="stylesheet" type="text/css" />
            <link href="resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
            <link href="resources/css/style.css" rel="stylesheet" type="text/css" />
            <title>.: Academik :.</title>
        </h:head>

        <h:body>
            <h:form id="frmPrincipal" prependId="false">
                <!--p:idleMonitor onactive="sessionTimeOutDialog.show();" timeout="{session.maxInactiveInterval * 1000}" />
                <p:dialog header="Sesión caducada" widgetVar="sessionTimeOutDialog" resizable="false" 
                          modal="true" closable="false" width="400" visible="false">
                    <h:panelGrid>
                        <h:panelGrid columns="2">
                            <h:graphicImage value="{resource['images:info.png']}" /> 
                            <h:outputText style="line-height: 1.5;" value="{session.maxInactiveInterval} La sesión ha caducado, por favor, pulse sobre el siguiente botón para volver a acceder a la aplicación" />
                        </h:panelGrid>
                        <p:commandButton id="confirmBackToLogin" type="button" value="Iniciar sesión" image="ui-icon-person"
                                         onclick="window.location='{facesContext.externalContext.requestContextPath}/'" />
                    </h:panelGrid>
                </p:dialog-->
                <p:growl id="msg" life="6000" globalOnly="true" showDetail="true" />
                <div id="loading" style="position:fixed; left:0px; top:0px; z-index: 101;">
                    <p:ajaxStatus style="width:16px;height:16px;">  
                        <f:facet name="start"> 
                            <p:panel style="width:150px; background: #FBEC88; border:solid 2px #FAD42E !important;">
                                <h:panelGrid columns="2" style="width:100%;">
                                    <h:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
                                    <h:outputText style="font-weight:bolder;" value="Cargando...."/>
                                </h:panelGrid>
                            </p:panel>
                        </f:facet>  
                        <f:facet name="complete">  
                            <h:outputText value="" />  
                        </f:facet>  
                    </p:ajaxStatus> 
                </div>
                <div id="top">
                    <table style="margin: 0; width: 100%; padding: 0px 0px 0px 0px; border: 0px; " >
                        <tr>
                            <td style="width: 15%;" align="center" >
                                <h:graphicImage height="40" value="#{resource['images:logo.png']}"/>                        
                            </td>
                            <td>
                                <p:menubar  >     
                                    <p:submenu label="Tareas" >
                                        <p:menuitem value="Inscripcciones" url="/faces/frmInscripcion.xhtml"/>
                                        <p:menuitem value="Matriculas" url="/faces/frmMatricula.xhtml"/>
                                    </p:submenu>
                                    <p:submenu label="Mantenimiento">
                                        <p:menuitem value="Alumnos" url="/faces/frmAlumnos.xhtml"/>
                                        <p:menuitem value="Personas" url="/faces/frmPersonas.xhtml"/>
                                    </p:submenu>
                                    <p:submenu label="Consultas y Reportes">
                                        <p:menuitem value="Consultar Matricula"  url="/faces/frmConsultaMatricula.xhtml"/>
                                        <p:menuitem value="Listados" url="/faces/frmListados.xhtml"/>
                                        <p:separator/>
                                        <p:menuitem value="Paquetes Escolares"  url="/faces/frmPaquetes.xhtml"/>
                                        <!--p:separator/>
                                        <p:menuitem value="Informe ingresos"/-->
                                    </p:submenu>
                                    <p:submenu label="Configuración">
                                        <p:menuitem value="Año Escolar"  url="/faces/frmAnioEscolar.xhtml"/>
                                        <p:menuitem value="Servicios" url="/faces/frmCatalogoServicios.xhtml"/>
                                        <p:menuitem value="Niveles" url="/faces/frmNiveles.xhtml"/>
                                        <p:menuitem value="Grados" url="/faces/frmGrados.xhtml"/>
                                        <p:menuitem value="Secciones" url="/faces/frmSecciones.xhtml"/>
                                        <p:menuitem value="Serie Recibos" url="/faces/frmSerieRecibo.xhtml"/>
                                    </p:submenu>
                                    <p:submenu label="Salir"/>
                                </p:menubar>
                            </td>
                            <!--td style="width: 15%; text-align: right; padding-right: 10px; " >
                                <p style="font-family: 'Calibri';
                                   font-size: 12px;" >Usuario: [Nombre Usuario]</p>
                            </td-->
                        </tr>
                    </table>
                </div>

                <div id="content" class="center_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>

                <style type="text/css" >
                    #uxp_ftr_control {
                        clear: both;
                        border-top: 1px solid #CCC;
                        width: 100%;
                        font-size: 86%;
                        color: black;
                        background-color: white;
                    }

                    .contenidoPie{
                        border-collapse: separate;
                        border-spacing: 2px;
                    }

                    #idUl{
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        padding-left: 10px;
                    }

                    .ulLi{
                        float: left;
                        padding: 5px 10px;
                        white-space: nowrap;
                        color: #666;
                        font-family: "Calibri";
                        font-size: 14px;
                    }

                    .pie{
                        white-space: nowrap;
                        color: #666;
                        font-family: "Calibri";
                        font-size: 14px;
                    }

                    .celdas {
                        display: table-cell;
                        vertical-align: inherit;
                    }

                    #fila{
                        display: table-row;
                        vertical-align: inherit;
                        border-color: inherit;
                    }
                </style>

                <div id="bottom">
                    <table id="uxp_ftr_control" class="conenidoPie" cellpadding="0" cellspacing="0" >
                        <tr class="celdas" id="fila" >
                            <td class="celdas" >
                                <ul id="idUl" >
                                    <li class="ulLi" ><span class="pie" >© 2012 Academik</span></li>
                                    <li class="ulLi"><span class="pie" >[Nombre Institución]</span></li>
                                    <li class="ulLi"><span class="pie" >Java Server Faces</span></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </h:form>
        </h:body>
    </f:view>

</html>
